<template>
    <div>
        <!-- 导航 -->
        <van-nav-bar title="资讯详情" left-text="" left-arrow
        @click="$router.push('/one')">
            <template #right >
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>

        <!-- 内容 -->
        <h1>{{topicxs.title}}</h1>
        <div >
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{topicxs.Textone}}</p>
            <img :src="topicxs.imagestwo" alt="">
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{topicxs.Texttwo}}</p>
            <img :src="topicxs.images" alt="">
            <van-divider content-position="left"  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                <b>{{topicxs.Textsmallone}}</b>
            </van-divider>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{topicxs.Textthree}}</p>
            <img :src="topicxs.imagesone" alt="">
            <van-divider content-position="left" :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
                <b>{{topicxs.Textsmalltwo}}</b>
            </van-divider>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{topicxs.Textfour}}</p>
        </div>

        <van-divider :style="{ color: '#ddd', borderColor: '#ddd', padding: '0 16px' }">
            没有更多了
        </van-divider>
    </div>
</template>

<script setup>
    import myaxios from "@/http/MyAxios";
    import { onBeforeMount,ref } from "vue";
    import { useRoute} from "vue-router";
    const $route=useRoute()
    const test=ref('1')

     const topicxs = ref({});
     onBeforeMount(() => {
        console.log($route.query.id);
        console.log(test);
        let url = `http://127.0.0.1:5000/topic/id?id=${$route.query.id}`;
        myaxios.get(url).then((res) => {
            console.log("资讯详情查询结果", res);
            topicxs.value = res.data.data
            console.log(topicxs);
        });
    });
</script>

<style scoped>
    h1,p{
        margin: 18px 25px;
    }
    h1{
        font-size: 35px;
    }
    p{
        font-size: 16px;
    }
    img{
        margin: 0 2%;
        width: 96%;
        height: 250px;
        object-fit: fill;
    }
</style>